


AO3 Workskin for Forum Thread

by fencesit



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Unconventional Format, Work Skin
Language: English
Status: Completed
Published: 2020-10-17
Updated: 2020-10-17
Packaged: 2021-03-08 22:14:43
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,159
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/27063988
Author URL: https://archiveofourown.org/users/fencesit/pseuds/fencesit
Summary: This is a simple workskin that mimics a basic forum thread!
Comments: 6
Kudos: 25
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works





	AO3 Workskin for Forum Thread

**Author's Note:**

  * Inspired by [How to Mimic Email Windows](https://archiveofourown.org/works/7953412) by [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 



> This workskin was created in the process of making a gift for my recip for [Fic In A Box 2020](https://ficinabox.dreamwidth.org/)! As of writing this note, that exchange is still in the creation period so I'm staying anonymous for now but posting this ahead of time because I think my fellow participants might find it useful! 
> 
> I started with La_Temperanza's wonderful email workskin because it had like 75% of what I needed already and fiddled with it until I had something useable, although I predict that more fiddling will happen later. If there's something you want from this workskin and you can't figure it out yourself, please feel free to comment and I will do my best to figure it out!

## Preview

Forums > Subforum > Sub-Subforum

Username  


Forum post here.

Posty posty posty

  * list?
  * listy list?



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Username2  


Forum post here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Username3  


Forum post here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## HTML

Below is the HTML template! It comes with one OP ("original post", the 1st post) and templates for the second post and third post. If you want more posts, just copy one of the post templates! One is for EVEN posts and one is for ODD posts, so that they can alternate colors. Put new posts above the threadfooter and below the other posts.
    
    
    <div class="window2">
    
    <div class="forumbackground">
    
    <p class="forumnav">Forums > Subforum > Sub-Subforum</p>
    
    <p class="threadtitle"> </p>
    
    <p class="usernameOP">Username<br />
    <img src="https://via.placeholder.com/100" /></p>
    
    <p></p><div class="postOP">
    
    <p>Forum post here.</p>
    
    <p>Posty posty posty</p><ul>
    <li>list?</li>
    <li>listy list?</li>
    </ul>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    
    <p class="importantspacer"> </p>
    
    <p class="postfooterOP"> </p>
    
    <p class="usernameEVEN">Username2<br />
    <img src="https://via.placeholder.com/100" /></p>
    
    <p></p><div class="postEVEN">
    
    <p>Forum post here.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>
    
    <p class="importantspacer"> </p>
    
    <p class="postfooterEVEN"> </p>
    
    <p class="usernameODD">Username3<br />
    <img src="https://via.placeholder.com/100" /></p>
    
    <p></p><div class="postODD">
    
    <p>Forum post here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    
    <p class="importantspacer"> </p>
    
    <p class="postfooterODD"> </p>
    
    <p class="threadfooter"> </p></div><div></div></div>
    

## CSS For Workskin

Create a new workskin and paste the CSS below into it! Then select that workskin in your new work. Ctrl+f "Thread topic" to find where you can edit that.
    
    
    #workskin .window2 {
      text-align: justify;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      margin-bottom: 0;
      width: 81.5%;
    }
    
    #workskin .forumbackground {
      display: inline-block;
      background-color: #000000;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
    }
    
    #workskin .forumnav {
      color: #eeeeee;
      font-size: small;
      cursor: pointer;
    }
    
    #workskin .threadtitle {
      background-color: #404040;
      color: #FFFFFF;
      border-color: #404040;
      border-style: solid;
      border-width: 1px;
      margin-top: 0;
      margin-bottom: 0;
      width: 100%;
      padding: 1px;
      height: 1.5em;
      font-size: biggest;
    }
    
    #workskin .threadtitle:before {
      content: 'Thread Topic!';
      display: inline-block;
      position: relative;
      float: left;
      font-weight: bold;
      padding: 0 3px;
      width: 85%;
      cursor: pointer;
    }
    
    #workskin .threadtitle:after {
      display: inline-block;
      position: relative;
      font-weight: bold;
      padding-right: 5px;
      float: right;
      color: #cfcfcf;
      -webkit-transform: scale(1.5, 1.0);
      -moz-transform: scale(1.5, 1.0);
      -ms-transform: scale(1.5, 1.0);
      -o-transform: scale(1.5, 1.0);
      transform: scale(1.5,1.0);
      cursor: pointer;
    }
    
    #workskin .usernameOP {
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      border-top: none;
      margin-top: 1px;
      margin-bottom: 0;
      width: 15%;
      height: auto;
      padding: 2px;
      color: #000000;
      background-color: #FFFFFF;
      display: block;
      float: left;
      text-align: center;
    }
    
    #workskin .postOP {
      float: left;
      width: 80%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2%;
      padding-right: 2%;
      text-align: justify;
      color: #000000;
      background-color: #FFFFFF;
      margin-left: auto;
      margin-right: auto;
      margin-top: -1.25em;
      display: block;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
      border-top: none;
    }
    
    #workskin .importantspacer {
      width: 15%;
      height: auto;
      padding: 2.5px;
      color: #000000;
      display: block;
      float: left;
      text-align: center;
      margin: 0px;
    }
    
    #workskin .postfooterOP {
      border-color: #cfcfcf;
      background-color: #FFFFFF;
      font-size: x-small;
      font-weight: 600;
      text-transform: uppercase;
      color: #000000;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
      height: 1.5em;
      float: left;
      width: 80%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2%;
      padding-right: 2%;
      margin: 0px;
    }
    
    #workskin .postfooterOP:after {
      content: 'Report | Quote';
      display: inline-block;
      position: relative;
      float: right;
      padding: 0 3px;
      cursor: pointer;
    }
    
    #workskin .usernameEVEN {
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      margin-top: 0;
      margin-bottom: 0;
      width: 15%;
      height: auto;
      padding: 2px;
      color: #000000;
      background-color: #f5f5f5;
      display: block;
      float: left;
      text-align: center;
    }
    
    #workskin .postEVEN {
      float: left;
      width: 80%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2%;
      padding-right: 2%;
      text-align: justify;
      color: #000000;
      background-color: #f5f5f5;
      margin-left: auto;
      margin-right: auto;
      display: block;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
    }
    
    #workskin .postfooterEVEN {
      border-color: #cfcfcf;
      background-color: #f5f5f5;
      font-size: x-small;
      font-weight: 600;
      text-transform: uppercase;
      color: #000000;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
      height: 1.5em;
      float: left;
      width: 80%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2%;
      padding-right: 2%;
      margin: 0px;
    }
    
    #workskin .postfooterEVEN:after {
      content: 'Report | Quote';
      display: inline-block;
      position: relative;
      float: right;
      padding: 0 3px;
      cursor: pointer;
    }
    
    #workskin .usernameODD {
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-right: none;
      margin-top: 0;
      margin-bottom: 0;
      width: 15%;
      height: auto;
      padding: 2px;
      color: #000000;
      background-color: #FFFFFF;
      display: block;
      float: left;
      text-align: center;
    }
    
    #workskin .postODD {
      float: left;
      width: 80%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2%;
      padding-right: 2%;
      text-align: justify;
      color: #000000;
      background-color: #FFFFFF;
      margin-left: auto;
      margin-right: auto;
      display: block;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
    }
    
    #workskin .postfooterODD {
      border-color: #cfcfcf;
      background-color: #FFFFFF;
      font-size: x-small;
      font-weight: 600;
      text-transform: uppercase;
      color: #000000;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
      height: 1.5em;
      float: left;
      width: 80%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2%;
      padding-right: 2%;
      margin: 0px;
    }
    
    #workskin .postfooterODD:after {
      content: 'Report | Quote';
      display: inline-block;
      position: relative;
      float: right;
      padding: 0 3px;
      cursor: pointer;
    }
    
    #workskin .threadfooter {
      background-color: #404040;
      color: #FFFFFF;
      border-color: #404040;
      border-style: solid;
      border-width: 1px;
      margin-top: 0;
      margin-bottom: 0;
      width: 100%;
      padding: 1px;
      height: 1.5em;
      display: inline-block;
    }
    
    #workskin .threadfooter:before {
      content: 'Reply';
      display: inline-block;
      position: relative;
      float: right;
      font-weight: bold;
      padding: 0 3px;
    }
    
    


End file.
